<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8" />
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <title></title>
  </head>
  <body>
    <div id="app">
        <ul>
            <li>孙悟空</li>
            <li>猪悟能</li>
            <li>沙悟净</li>
        </ul>
        
        <ul>
          <li v-for="(person,index) in persons" :key="person.id">{{ person.name}} {{ person.age }} ---- {{index }}</li>
        </ul>
    </div>
    <script src="./js/vue.js"></script>
    <script>
      const vm = new Vue({
        data:{
            //名称
            persons:[
              {id:1,name:"石昊",age:20},
              {id:2,name:"柳神",age:500},
              {id:3,name:"清漪",age:22},
              {id:4,name:"火灵儿",age:25},
              {id:5,name:"伊人泪",age:24},
              {id:6,name:"石毅",age:26},
              {id:7,name:"静好",age:30},

            ]
        }
      });
      vm.$mount("#app");
    </script>
  </body>
</html>
